<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/admin.css">
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css">
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css">
<link rel="stylesheet" href="/assets/css/jquery.iviewer.css">
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<script src="/assets/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/jquery-ui.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.js"></script>
<script src="/assets/js/adminsg.js"></script>
<script src="/assets/js/axios.min.js"></script>
<script src="/assets/js/jquery.mousewheel.min.js"></script>
<script src="/assets/js/jquery.iviewer.js"></script>
<style>
.modal-backdrop.in {
	opacity: 0;
}
:root {
	overflow-x: auto;
}

body {
	background-color: #f5f5f5;
	width: 100%;
}

.headbody {
	padding-top: 20px;
	background-color: #fff;
}

.contariner {
	position: relative;
	overflow: hidden;
}

.contariner .content {
	position: relative;
	padding: 10px;
	/*margin: 30px auto;*/
	margin-top: 13px;
	margin-bottom: 30px;
	background-color: #fff;
	margin-left: 16%;
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .05);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .05);
	min-height: 85vh;
}

.contariner .content .search-wrapper {
	position: absolute;
    top: 20px;
    left: 10px;
    width: 74%;
}

.contariner .content .search-wrapper select {
	width: 13%;
	display: inline-block;
	margin-right: 5px;
}

.contariner .content .search-wrapper input {
	width: 16%;
	display: inline-block;
	margin-right: 5px;
	vertical-align: top;
}

.contariner .content .search .form-control {
	width: 125px;
	display: inline-block;
	float: left;
	margin-right: 10px;
}

.navbox {
	position: absolute;
	width: 15%;
	top: 60px;
	left: 0;
	bottom: 0;
	background-color: #fff;
	-webkit-box-shadow: 1px 0px 10px rgba(0, 0, 0, .05);
	box-shadow: 1px 0px 10px rgba(0, 0, 0, .05);
	z-index: 1;
	padding: 0;
}

.navbox .searchbox {
	padding: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
	position: relative;
}

.navbox .searchbox i {
	position: absolute;
	top: 28px;
	right: 28px;
	cursor: pointer;
}

.navbox ul.nav li a {
	display: block;
	padding: 8px 15px;
	color: #09f;
}

.navbox ul.nav li a i {
	margin-right: 10px;
}

.navbox ul.nav li.active a {
	color: #fff;
	background-color: #09f;
}

#msgBox .modal-header .tabbox {
	width: 360px;
	margin: 4px auto;
	overflow: hidden;
}

#msgBox .modal-header .tabbox span {
	width: 120px;
	padding: 8px 0;
	float: left;
	text-align: center;
	cursor: pointer;
	border: 1px solid #e0e0e0;
}

#msgBox .modal-header .tabbox span.info {
	border-right: 0;
	border-radius: 5px 0 0 5px;
}

#msgBox .modal-header .tabbox span.record {
	border-right: 0;
}

#msgBox .modal-header .tabbox span.price {
	border-radius: 0 5px 5px 0;
}

#msgBox .modal-header .tabbox span.active {
	background-color: #006eff;
	color: #fff;
	border-color: #006eff;
}

#msgBox .modal-body {
	overflow: auto;
}

#msgBox .modal-body .content {
	display: none;
}

#msgBox .modal-body .info .cls-wrapper {
	margin-bottom: 15px;
}

#msgBox .modal-body .info .cls-wrapper .title {
	border-left: 4px solid #006eff;
	border-bottom: 1px solid #006eff;
	font-weight: bold;
	color: #333;
	text-indent: 8px;
	margin-bottom: 15px;
}

#msgBox .modal-body .info .cls-wrapper .msg {
	overflow: hidden;
}

#msgBox .modal-body .info .cls-wrapper .msg .dir {
	text-align: center;
	cursor: pointer;
	padding-bottom: 5px;
	border-radius: 3px;
	height: 130px;
}

#msgBox .modal-body .info .cls-wrapper .msg .dir:hover {
	background-color: #e5f3ff;
}

#msgBox .modal-body .info .cls-wrapper .msg .dir i {
	font-size: 70px;
	color: #ffcd2e;
}

#msgBox .modal-body .info .cls-wrapper .msg .dir p {
	margin: -15px 0 0 0;
}

#msgBox .modal-body .info .cls-wrapper .msg .col-md-4 {
	margin-bottom: 5px;
}

#msgBox .modal-body .info .cls-wrapper .msg .name {
	color: #5e6d82; 
}

#msgBox .modal-body .active {
	display: block;
}

#msgBox .modal-body .record {
	position: relative;
	width: 40%;
	margin: 0 auto;
}

#msgBox .modal-body .price table {
	width: 100%;
}

#msgBox .modal-body .price table th,td {
	border: 1px solid #ddd;
	padding: 5px;
	text-align: center;
}

#msgBox .modal-body .record .pro {
	position: absolute;
	width: 10%;
	top: 0;
	left: 50%;
	margin-left: -5%;
	height: 100%;
}

#msgBox .modal-body .record .pro .bor {
	width: 2px;
	height: 100%;
	background-color: #006eff;
	margin: 0 auto;
}

#msgBox .modal-body .record .list {
	padding: 10px 0;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

#msgBox .modal-body .record .list div {
	display: inline-block;
	font-size: 0;
	width: 40%;
	vertical-align: middle;
}

#msgBox .modal-body .record .list div.left {
	text-align: right;
	font-size: 14px;
}

#msgBox .modal-body .record .list div.left p {
	margin: 0;
}

#msgBox .modal-body .record .list div.right {
	margin-left: 18%;
	font-size: 14px;
}

#msgBox .modal-body .record .list img {
	position: absolute;
	width: 18px;
	z-index: 1;
	left: 50%;
	top: 50%;
	margin: -9px 0 0 -9px;
}

#msgBox .modal-body .record .list div.iconfont i {
	color: #006eff;
}

.showimg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1060;
	background-color: rgba(0, 0, 0, .8);
}

.showimg .imgbox {
	position: absolute;
	top: 10%;
	left: 20%;
	right: 20%;
	bottom: 10%;
}

.showimg .imgbox ul {
	margin: 0;
}

.showimg .imgbox ul.imgul {
	height: 100%;
}

.showimg .imgbox ul.imgul li {
	position: relative;
	height: 100%;
	display: none;
}

.showimg .imgbox ul.imgul li.active {
	display: block;
}

.showimg .imgbox ul.imgul li .imgdom {
	height: 100%;
}

.showimg .imgbox ul.imgul li .text {
	height: 100%;
	color: #fff;
    text-align: center;
    font-size: 30px;
    line-height: 300px;
}

.showimg .imgbox ul.btn li {
	position: absolute;
	top: 50%;
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
	margin-top: -60px;
}

.showimg .imgbox ul.btn li.left {
	left: -12%;
}

.showimg .imgbox ul.btn li.right {
	right: -12%;
}

.showimg .imgbox ul.btn li i {
	font-size: 66px;
	color: #fff;
}

.css3loadingbox .line-spin-fade-loader div {
	background-color: #fff;
}

.showimg .imgbox ul.imgul li {
	position: relative;
    height: 100%;
    display: none;
}

.showimg .imgbox ul.imgul li.active {
    display: block;
}

.showimg .imgbox ul.imgul li .info {
	position: absolute;
	width: 100%;
	height: 60px;
	left: 0;
	bottom: -60px;
}

.showimg .imgbox ul.imgul li .info p.title {
	margin: 0 auto;
	width: 70%;
	color: #fff;
	text-align: center;
	font-size: 16px;
}

.showimg .imgbox ul.imgul li .info p.page {
	position: absolute;
	top: 2%;
	right: 0;
	color: #fff;
	font-size: 14px;
}

</style>
</head>
<body>
	#@confirm()
	#@alertsh()
	#@alertsubmit()
	
	<!-- 图片预览 -->
	<div class="showimg" id="showimg" style="visibility: hidden;">
		<div class="imgbox">
			<ul class="imgul"></ul>
			<ul class="btn">
				<li class="left"><i class="iconfont">&#xe8ef;</i></li>
				<li class="right"><i class="iconfont">&#xe8f1;</i></li>
			</ul>
		</div>
	</div>
	
	<!-- 弹窗 -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="msgBox">
	  <div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <div class="tabbox">
	        	<span class="info active" load="0" type="1">订单详情</span>
	        	<span class="record" load="0" type="2">订单日志</span>
	        	<span class="price" load="0" type="3">还款详情</span>
	        </div>
	      </div>
	      <div class="modal-body">
	        <div class="info content active" type="1"></div>
	        <div class="record content" type="2"></div>
	        <div class="record content" type="3"></div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!-- 	        <button type="button" class="btn btn-primary">Save changes</button> -->
	      </div>
	    </div>
	  </div>
	</div>
	
	<div class="contariner" id="contariner">
		#@adminHeader()
		<div class="navbox col-md-3">
			<div class="searchbox">
				<form action="#" method="get">
					<input type="text" name="search" placeholder="搜索"
						class="form-control" /> <i class="iconfont" id="searchbtn">&#xe664;</i>
				</form>
			</div>
			<ul class="nav">
				<li class="#(tableType=='statistic'?'active':'')"><a
					href="/admin/dataStatistic"> <i class="iconfont">&#xe649;</i>
						车抵贷
				</a></li>
				<li class="#(tableType=='query'?'active':'')"><a
					href="/admin/dataQuery"> <i class="iconfont">&#xe617;</i> 数据查询
				</a></li>
			</ul>
		</div>
		<div class="content col-md-10">
			<div class="search-wrapper">
				<select id="opt" class="form-control">
					<option value="">筛选通道</option>
					<option value="苏宁">苏宁</option>
					<option value="绿城">绿城</option>
					<option value="明云">明云</option>
				</select> 
				<select id="progress" class="form-control">
					<option value="">筛选进度</option>
					<option value="1">申请中</option>
					<option value="2">审核通过</option>
					<option value="4">已放款</option>
					<option value="5">逾期</option>
					<option value="6">放弃</option>
				</select> 
				<select id="pres" class="form-control">
					<option value="">筛选省份</option>
				</select> 
				<select id="city" class="form-control">
					<option value="">筛选城市</option>
				</select>
<!-- 				<input type="text" class="form-control date-hook" placeholder="开始日期" id="startdate" readonly="readonly" /> -->
<!-- 				<input type="text" class="form-control date-hook" placeholder="结束日期" id="enddate" readonly="readonly" /> -->
			</div>
			<div>
				<table class="datatable" id="datatable" data-unique-id="id"></table>
			</div>			
		</div>
	</div>
	
	<script src="/assets/laydate/laydate.js"></script>
	<script src="/assets/js/tableExport.js"></script>
	<script src="/assets/js/bootstrap-table-export.js"></script>
	<script>
		$(function(){
			var $table = $('#datatable'),
				provinceArr = [],
				cityArr = [],
				preDom = $("#pres"),
				cityDom = $("#city")
				
			//获取省市
			axios.post("/statis/getFilterAttrs")
			.then(function(res){
				provinceArr = res.data.pro;
				cityArr = res.data.city;
				var provinceSel = "";
				for(var i = 0;i < provinceArr.length;i++){
					provinceSel += "<option value='"+ [i] +"|"+ provinceArr[i] +"'>"+ provinceArr[i] +"</option>";
				}
				preDom.append(provinceSel)
			})
			
			preDom.change(function(){
				var val = $(this).val().split("|"),
					index = val[0],
					citySel = "";
				cityDom.html("<option value=''>选择城市</option>")				
				
				if(index == "")return;
				for(var i = 0;i < cityArr[index].length;i++){
					citySel += "<option value='"+ cityArr[index][i] +"'>"+ cityArr[index][i] +"</option>";
				}
				cityDom.append(citySel);
			})
			
			//搜索
			$("#searchbtn").click(function(){
				var input = $(this).siblings("input");
				if(input.val() != ""){
					$(this).parent().submit();
				}else{
					input.focus();
				}
			})
			
			axios.post("/statis/searchOrders")
			.then(function(res){
				console.log(res.data)
				var data = res.data,
					titles = [{checkbox:true}],
					$data = data.data
				
				for(var i = 0;i < data.names.length;i++){
					var field = data.fields[i]
					
					if(field === "progress")field = "progressHtml"
					
					titles.push({
						field: field,
						title: data.names[i]
					})
				}
				
				titles.push({field: 'lookInfo',title:'详情'})
				
				createTable(titles,fieldChange($data))
			})
			
			function fieldChange (data) {
				for(var i = 0;i < data.length;i++){
					var txt = ""
					if(data[i].progress == 1){
						txt = "申请中"
					}else if(data[i].progress == 2){
						txt = "审核通过"
					}else if(data[i].progress == 4){
						txt = "已放款"
					}else if(data[i].progress == 5){
						txt = "逾期"
					}else if(data[i].progress == 6){
						txt = "放弃"
					}
					data[i].lookInfo = "<button class='btn btn-primary' data-orderid='"+ data[i].order_id +"' data-progress='"+ data[i].progress +"'>查看</button>"
					data[i].progressHtml = txt
				}
				return data
			}
			
			//创建表格
			function createTable(titles,data){
				$table.bootstrapTable({
					uniqueId: 'id',
					search: true,
					pagination: true, 
		            pageSize: 10,
				    columns: titles,
				    data: data,
				    sortStable:true,
				    clickToSelect: true,
				    showExport: true,
					exportTypes: ["excel"],
					exportOptions:{
						ignoreColumn:[0,12]
					}
				});		
			}
			
			var optDom = $("#opt"),
				progDom = $("#progress"),
				startDom = $("#startdate"),
				endDom = $("#enddate")
			$("#contariner").on("change",".search-wrapper select",function(){
				var proVal = preDom.val().split("|")[1]
				if(!proVal)proVal = ""
				var data = {
						opt: optDom.val(),
						//startdt: startDom.val(),
						//enddt: endDom.val(),
						progress: progDom.val(),
						pro: proVal,
						city: cityDom.val()
					}
				axios.post("/statis/searchOrders",_x.qsStringify(data))
				.then(function(res){
					console.log(res.data)
					$table.bootstrapTable('load', fieldChange(res.data.data))
				})
			})
			
			$table.on("click","input[name='btSelectAll']",function(){
				var data = $table.bootstrapTable('getData'),
					isCheck = $(this).prop("checked")
				for(var i = 0;i < data.length;i++){
					data[i]["0"] = isCheck
				}
			})
			
			/* 弹窗 */
			var msgBox = $("#msgBox"),
				msgHead = msgBox.find(".modal-header"),
				msgBody = msgBox.find(".modal-body"),
				msgFooter = msgBox.find(".modal-footer")
				loadingHTML = "<p style='margin: 3% 0;text-align: center;'><img src='/assets/img/big-loading.svg' width='30' />&nbsp;<span style='vertical-align: middle;'>正在加载...</span></p>"
			
			msgBody.css("max-height",$(window).height() * .68)
			
			$table.on("click","button",function(){
				var oid = $(this).data("orderid"),
					progress = $(this).data("progress")
				if (progress < 4) {
					msgHead.find("span[type='3']").addClass("no-hook")
				} else {
					msgHead.find("span[type='3']").removeClass("no-hook")
				}
				
				msgFooter.children("p").remove()
				msgBox.data("orderid",oid)
				msgBody.children(".info").addClass("active").siblings().removeClass("active")
				msgBody.children().html(loadingHTML)
				msgHead.children(".tabbox").children("span").attr("load",0)
				msgHead.find("span.info").addClass("active").siblings().removeClass("active")
				msgBox.modal("show")
				//msgBody.html(renderErr("出错了"))
				var nowContent = msgBody.children(".info")
				getMsg(oid, 1, function(code, html){
					if(code === 1){
						nowContent.html(html)
						msgHead.find("span.info").attr("load",1)
					}else{
						nowContent.html(renderErr("出错了，请稍后重试！"))
					}
				})
				console.log(oid);
				$.ajax({
					url:'/statis/getSourceInfo',
					type:'post',
					data:{order_id:oid},
					success:function(data){
						console.log(data);
					}
				})
			})
			
			//切换
			msgHead.find("span").click(function(){
				var that = $(this),
					oid = msgBox.data("orderid"),
					type = that.attr("type"),
					load = that.attr("load"),
					nowContent = msgBody.find(".content[type='"+ type +"']")
				if (that.hasClass("no-hook")) {
					nowContent.html("")
				} else {
					if(load == 0){
						getMsg(oid, type, function(code, html, footerTip){
							if(code === 1){
								nowContent.html(html)
								that.attr("load",1)
							}else{
								nowContent.html(renderErr("出错了，请稍后重试！"))
							}
							
							if (footerTip) {
								msgFooter.append(footerTip)
							}
						})
					}
				}
				
				that.addClass("active").siblings().removeClass("active")
				nowContent.addClass("active").siblings().removeClass("active")
			})
			
			function renderErr(text){
				return "<div class='alert alert-danger'>"+ text +"</div>"
			}
			
			/**
			 * oid 订单号
			 * type 1 详情  操作记录2
			 */
			function getMsg(oid, type, callback) {
				var html = ""
				if(type == 1){
					axios.post("/statis/getSourceInfo",_x.qsStringify({order_id: oid}))
					.then(function(res){
						msgHead.find("span.info").attr("load",1)
						console.log(res.data)
						callback(1,renderMsgInfo(res.data))
					})
					.catch(function(err){
						callback(0)
					})
				}else if (type == 2) {
					axios.post("/statis/getProgressInfo",_x.qsStringify({orderId: oid}))
					.then(function(res){
						var data = res.data.progress
						html += "<div class='pro'><div class='bor'></div></div>"
						
						for(var i = 0;i < data.length;i++){
							html += "<div class='list'>"+
									"	<div class='left'>"+
									"		<p>"+ data[i].assessor +"</p>"+
									"		<p>"+ data[i].fixTime +"</p>"+
									"	</div>"+
									"	<img src='/assets/img/progress.jpg' />"+
									"	<div class='right'>"+ data[i].title +"-"+ data[i].state +"</div>"+
									"</div>"
						}
						
						callback(1,html)
					})
					.catch(function(){
						callback(0,"")
					})
				}else if (type == 3){
					axios.post("/fuioudq/celPayInfo",_x.qsStringify({order_id: oid}))
					.then(function(res){
						var data = res.data.data,
							$overdueDays = 0,
							$overdueFee = 0
						html += "<div class='pro'><div class='bor'></div></div>"
						
						for(var i = 0;i < data.length;i++){
							var state = overdueDays = ""
							if (data[i].state == -1) {
								state = "未发起代扣"
							} else if (data[i].state == 0) {
								state = "<span style='color: #d9534f;'>逾期未还</span>"
								if (data[i].overdueDays > 0) {
									state = "&nbsp;&nbsp;<span style='color: #d9534f;'>逾期"+ data[i].overdueDays +"天</span>"
								}
							} else if (data[i].state == 1) {
								state = "<span style='color: #5cb85c;'>正常还款</span>"
								if (data[i].overdueDays > 0) {
									state = "<span style='color: #f0ad4e;'>有逾期</span>&nbsp;&nbsp;<span style='color: #f0ad4e;'>逾期"+ data[i].overdueDays +"天</span>"
								}
							}
							
							if (data[i].overdueDays > 0) {
								overdueDays = "<span style='margin-left: 15px;color: #d9534f;'>逾期"+ data[i].overdueDays +"天</span>"
							}
							
							$overdueDays += data[i].overdueDays
							$overdueFee += data[i].overdueFee
							
							html += "<div class='list'>"+
									"	<div class='left'>"+
									"		<p>第"+ data[i].idx +"期&nbsp;&nbsp;"+ data[i].amt +"元</p>"+
									"		<p>"+ data[i].reqdt +"</p>"+
									"	</div>"+
									"	<img src='/assets/img/progress.jpg' />"+
									"	<div class='right'>"+ state + overdueDays +"</div>"+
									"</div>"
						}
						var tip = ""
						if ($overdueDays > 0) {
							tip = "<p style='float: left;'>逾期天数："+ $overdueDays +"天&nbsp;&nbsp;&nbsp;&nbsp;逾期费用："+ $overdueFee +"元</p>"
						}
						
						callback(1,html,tip)
					})
					.catch(function(){
						callback(0,"")
					})
				}
			}
			
			function loadTable (data) {
				var html = "<table>"+
						   "	<thead>"+
						   "		<tr>"+
						   "			<th>期数</th>"+
						   "			<th>还款金额</th>"+
						   "			<th>发起时间</th>"+
						   "			<th>结果</th>"+
						   "			<th>逾期天数</th>"+
						   "			<th>逾期费用</th>"+
						   "	</thead>"+
						   "	<tbody>"
				for (var i = 0;i < data.length;i++) {
					html += "<tr>"+
							"	<td>"+ data[i].idx +"</td>"+
							"	<td>"+ data[i].amt +"</td>"+
							"	<td>"+ data[i].reqdt +"</td>"+
							"	<td>"+ data[i].memo +"</td>"+
							"	<td>"+ data[i].overdueDays +"</td>"+
							"	<td>"+ data[i].overdueFee +"</td>"+
							"</tr>"
				}
				html += "</tbody></table>"
				return html
			}
			
			function renderMsgInfo (data) {
				var titleList = data.titleList,
					formData = data.formData,
					source = data.source,
					video = data.video,
					html = "";
			console.log(titleList);
				for(var i = 0;i < titleList.length;i++){
					html += "<div class='cls-wrapper'>"+
							"	<div class='title'>"+ titleList[i] +"</div>"+
							"	<div class='msg'>";
					var msgInfo = formData[i]
					for(var k in msgInfo){
						html += "<div class='col-md-4'><span class='name'>"+ msgInfo[k].name +"：</span><span class='value'>"+ msgInfo[k].value +"</span></div>"
					}
					html += "</div></div>"
				}
				
				if (!_x.isEmpty(source)) {
					html += "<div class='cls-wrapper'>"+
							"	<div class='title'>资产包</div>"+
							"	<div class='msg'>";
					for(var i = 0;i < source.length;i++){
						var name = "",
							path = ""
						for(var j = 0;j < source[i].list.length;j++){
							name += "," + source[i].list[j].name
							path += "," + source[i].list[j].path
						}
						name = name.substring(1)
						path = path.substring(1)
						html += "<div class='dir col-md-2' name='"+ name +"' path='"+ path +"'><i class='iconfont'>&#xe65b;</i><p>"+ source[i].packageName +"</p></div>"
					}
					html += "</div></div>"
				}
				
				if (!_x.isEmpty(video)) {
					html += "<div class='cls-wrapper'>"+
							"	<div class='title'>视频资料</div>"+
							"	<div class='msg'>";
					 for(var i = 0;i < video.length;i++){
						
						html += `
							<div class=' col-md-6'>
								<video src="${video[i].list[0].path}" controls="controls" width='100%' height='200'></video>
								<p style='text-align:center'>${video[i].packageName}</p>
							</div>
						`
					} 
					html += "</div></div>"
				}
				
				return html
			}
			
			//图片预览
			var showimg = $("#showimg"),//背景层
				imgbox = showimg.children(".imgbox"),//可视区域
				imgboxW = imgbox.width(),
				imgboxH = imgbox.height(),
				imgBtn = imgbox.children("ul.btn"),
				imgul = imgbox.children("ul.imgul"),//图片容器
				loadingHtml = "<div class='css3loadingbox' style='position: absolute;top: 50%;left: 50%;margin: -40px 0 0 -40px;'>"+
							  "    <div class='line-spin-fade-loader'>"+
							  "        <div></div>"+
							  "        <div></div>"+
							  "        <div></div>"+
							  "	       <div></div>"+
						 	  "	       <div></div>"+
							  "	       <div></div>"+
							  "	       <div></div>"+
							  "	       <div></div>"+
							  "    </div>"+
							  "</div>";
				
			//获取宽度高度后隐藏
			showimg.removeAttr("style").hide()
			
			msgBody.on("click","div.dir",function(){
				var that = $(this),
					names = that.attr("name").split(","),
					paths = that.attr("path").split(",")
				imgul.html("")
				
				showimg.fadeIn(300)
				for(var i = 0;i < paths.length;i++){
					var activeCls = "";
					if (i === 0)activeCls = "active"
					var liDom = $("<li class='"+ activeCls +"'>"+ loadingHtml +"</li>"),
						titleDom = $("<div class='info'><p class='title'>"+ names[i] +"</p><p class='page'>"+ (i + 1) +"/"+ paths.length +"</p></div>")
					liDom.append(titleDom)
					imgul.append(liDom)
					
					;(function(path,i){
						_x.imageLoad(path, function(code){
							imgul.children("li").eq(i).children(".css3loadingbox").remove()
							if (code === 1) {
								var imgBox = $("<div></div>")
								imgBox.css({
									width: imgboxW,
									height: imgboxH,
									position: "relative"
								})
								imgBox.iviewer({
				                     src: this.src
				                })
				               
				                imgul.children("li").eq(i).append(imgBox)
							}
						})
					})(paths[i],i)
				}
			})
			
			//关闭图片展示
			showimg.on("click",function(e){
				$(this).fadeOut(300);
			})
			
			imgbox.on("click","img",function(e){
				e.stopPropagation();
			})
			
			imgbox.on("click",function(e){
				e.stopPropagation();
			})
			
			showimg.on("click","div.iviewer_common",function(e){
				e.stopPropagation()
			})
			
			//左右切换
			imgBtn.children("li").click(function(){
				var that = $(this),
					index = imgul.children("li.active").index(),
					len = imgul.children("li").length
				
				if (that.index() === 0) {
					index--
				} else {
					index++
				}
				
				if (index < 0) {
					index = len - 1
				}
				
				if (index >= len) {
					index = 0
				}
				console.log(that.index())
				imgul.children("li").eq(index).addClass("active").siblings().removeClass("active")
			})
		})
		
		
		!function(){
			var start = {
			    elem: '#startdate',
			    choose: function(datas){
					end.min = datas; //开始日选好后，重置结束日的最小日期
					end.start = datas; //将结束日的初始值设定为开始日
					var proVal = $("#pres").val().split("|")[1]
					if(!proVal)proVal = ""
					var data = {
							opt: $("#opt").val(),
							startdt: datas,
							enddt: $("#enddate").val(),
							progress: $("#progress").val(),
							pro: proVal,
							city: $("#city").val()
						}
					axios.post("/statis/searchOrders",_x.qsStringify(data))
					.then(function(res){
						$('#datatable').bootstrapTable('load', res.data.data)
					})
			    }

			};

			var end = {
			    elem: '#enddate',
			    choose: function(datas){
			    	start.max = datas; //结束日选好后，充值开始日的最大日期
			    	var proVal = $("#pres").val().split("|")[1]
					if(!proVal)proVal = ""
			    	var data = {
							opt: $("#opt").val(),
							startdt: $("#startdate").val(),
							enddt: datas,
							progress: $("#progress").val(),
							pro: proVal,
							city: $("#city").val()
						}
					axios.post("/statis/searchOrders",_x.qsStringify(data))
					.then(function(res){
						$('#datatable').bootstrapTable('load', res.data.data)
					})
			    }
			};
			laydate(start);
			laydate(end);
		}();
	</script>
	
</body>
</html>